<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>商品回收站</title>
		<link rel="stylesheet" type="text/css" href="../static/css/elementui-ui-font.css" />
		<link rel="stylesheet" type="text/css" href="../static/css/elementui.css" />
		<script src="../static/js/Vue-2.6.12.js" type="text/javascript" charset="utf-8"></script>
		<script src="../static/js/axios.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../static/js/elementui.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.avatar-uploader .el-upload {
				border: 1px dashed #d9d9d9;
				border-radius: 6px;
				cursor: pointer;
				position: relative;
				overflow: hidden;
			}

			.avatar-uploader .el-upload:hover {
				border-color: #409EFF;
			}

			.avatar-uploader-icon {
				font-size: 28px;
				color: #8c939d;
				width: 178px;
				height: 78px;
				line-height: 78px;
				text-align: center;
			}

			.avatar {
				width: 178px;
				height: 78px;
				display: block;
			}

			.el-row {
				margin-bottom: 20px;
				&:last-child {
					margin-bottom: 0;
				}
			}

			.el-col {
				border-radius: 4px;
			}

			.grid-content {
				border-radius: 4px;
				min-height: 36px;
			}
		</style>
	</head>
	<body>

		<div id="app">
			<el-row :gutter="24">
			</el-row>
			<el-row :gutter="24">
				<el-col :span="3">
					<div class="grid-content bg-purple"></div>
				</el-col>
				<el-col :span="18">
					<el-form :inline="true" :model="searchForm" class="demo-form-inline">
						<el-form-item label="品牌名">
							<el-input v-model="searchForm.brandName" placeholder="输入品牌全名"></el-input>
						</el-form-item>
						<el-form-item label="商品名">
							<el-input v-model="searchForm.name" cleaned placeholder="商品名"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="findList">查询</el-button>
						</el-form-item>
					</el-form>

					<el-table :data="goodsList" style="width: 100%" border>
						<el-table-column prop="id" label="编号" width="180">
						</el-table-column>
						<el-table-column prop="name" label="商品名" width="180">
						</el-table-column>
						<el-table-column prop="sn" label="货号" width="200">
						</el-table-column>
						<el-table-column  label="是否上架" width="100">
							<template slot-scope="scope">
								<el-switch disabled v-model="scope.row.isMarketable" active-color="#13ce66" inactive-color="#ff4949" active-value="1"
										   inactive-value="">
								</el-switch>
							</template>
						</el-table-column>
						<el-table-column label="是否删除" width="100">
							<template slot-scope="scope">
								<el-switch disabled v-model="scope.row.isDelete" active-color="#13ce66" inactive-color="#ff4949" active-value="1"
										   inactive-value="">
								</el-switch>
							</template>
						</el-table-column>
						<el-table-column label="审核状态" width="100">
							<template slot-scope="scope">
								<el-switch disabled v-model="scope.row.status" active-color="#13ce66" inactive-color="#ff4949" active-value="1"
												 inactive-value="">
								</el-switch>
							</template>
						</el-table-column>
						
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-link @click="edit(scope.row.id)"  type="success">还原</el-link>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination @size-change="findList" @current-change="findList" :current-page.sync="currentPage" :page-sizes="[10, 20, 30, 40]"
					 :page-size.sync="size" layout="total, sizes, prev, pager, next, jumper" :total="total">
					</el-pagination>
				</el-col>
				<el-col :span="3">
					<div class="grid-content bg-purple"></div>
				</el-col>
			</el-row>
		</div>

		<script type="text/javascript">
			new Vue({
				el: "#app",
				data: function() {
					return {
						activeName:'first',
						goodsList: [],
						total: 100,
						size: 10,
						currentPage: 1,
						searchForm: {isDelete:1},
						goods:{skus:[],spu:{}},
						dialogFormVisible:false
					}
				},
				methods: {
					findList() {
						axios.post(`/api/spu/findcondtionpage.do?startpage=${this.currentPage}&pagesize=${this.size}`, this.searchForm)
							.then(
								response => {
									this.goodsList = response.data.records
									this.total = response.data.total
								}).catch(function(error) {
								console.log(error);
							})
					},
					edit(id) {
						this.dialogFormVisible = true
						axios.get(`/api/goods/findgoodsbyid.do?id=${id}`).then((resp) => {
							this.goods = resp.data
							console.log(this.goods.spu)
							
						}).catch((err)=>{this.$message.error("查询失败")})
					},
					del(id) {
						this.$confirm("确认删除？", '确认删除').then(() => {
							axios.get(`/api/spu/deletebyid.do?id=${id}`).then((response) => {
								if (response.data.code == 1) {
									this.$message.error(response.data.msg)
								} else {
									this.$message.success(response.data.msg)
									this.findList()
								}
							})
						})
					},
					save(){
						
					},
					handleAvatarSuccess(res, file) {
						this.goods.image = file.response
					},
					beforeAvatarUpload(file) {
						const isJPG = file.type === 'image/jpeg';
						const isLt2M = file.size / 1024 / 1024 < 2;
						if (!isJPG) {
							this.$message.error('上传头像图片只能是 JPG 格式!');
						}
						if (!isLt2M) {
							this.$message.error('上传头像图片大小不能超过 2MB!');
						}
						return isJPG && isLt2M;
					}
				},
				created() {
					this.findList()
				}
			})
		</script>
	</body>
</html>
